<template>
  <view class="container">
<!--    <view class="index_banner">-->
<!--      <swiper-->
<!--        class="screen-swiper square-dot"-->
<!--        circular="true"-->
<!--        indicator-dots="true"-->
<!--        autoplay="true"-->
<!--        interval="5000"-->
<!--        duration="500"-->
<!--      >-->
<!--        <swiper-item-->
<!--          v-for="(item, index) in carouselList"-->
<!--          :key="index"-->
<!--          @click="navToAdvUrls(item)"-->
<!--        >-->
<!--          <image :src="weburl + item.path" mode="scaleToFill"></image>-->
<!--        </swiper-item>-->
<!--      </swiper>-->
<!--    </view>-->
		<view style="padding: 40rpx 0 0 40rpx">
			<image src="@/static/images/ui-1/7.png" style="width:210rpx;height: 60rpx"></image>
		</view>
    <view class="index_tarbar">
      <view class="tarbar_img_01" @click="navToUrl('/pages/news/list')">
        <view class="tarbar_tx01">
	        <view class="title">
		        <view class="title-text">行业资讯</view>
		        <view class="btn">
			        <u-icon
				        size="12"
				        color="#fff"
				        name="arrow-right"
			        ></u-icon>
		        </view>
	        </view>
	        <view class="info-text">2项更新</view>
	        <view class="btn2">查看更多</view>
        </view>
        <image src="@/static/images/ui-1/4.png" style="height: 500rpx"></image>
      </view>
      <!-- <view class="tarbar_img_02" @click="navToUrl('/pages/news/active')">> -->
      <view style="width: 50%">
	      <view class="tarbar_img_02" @click="navToUrl('/pages/news/active')">
		      <view class="tarbar_tx02">
			      <view class="title">
				      <view class="title-text">精选活动</view>
				      <view class="btn">
					      <u-icon
						      size="12"
						      color="#fff"
						      name="arrow-right"
					      ></u-icon>
				      </view>
			      </view>
			      <view class="info-text">2项更新</view>
			      <view class="btn2">查看更多</view>
		      </view>
		      <image src="@/static/images/ui-1/5.png"  style="height: 240rpx"></image>
	      </view>
	      <view class="tarbar_img_03" @click="navToUrl('/pages/news/longContract')">
		      <view class="tarbar_tx03">
			      <view class="title">
				      <view class="title-text">长约活动详情</view>
				      <view class="btn">
					      <u-icon
						      size="12"
						      color="#fff"
						      name="arrow-right"
					      ></u-icon>
				      </view>
			      </view>
			      <view class="info-text">2项更新</view>
			      <view class="btn2">查看更多</view>
		      </view>
		      <image src="@/static/images/ui-1/6.png"  style="height: 240rpx"></image>
	      </view>
      </view>
    </view>
    <view class="main_plate">
      <view class="wallet_top">
        <view class="my_wal_tit">热门签约</view>
	      <view class="my_wal_tit-info">{{classification[chosePart - 1].name}}</view>
      </view>
      <view class="partList" >
        <view
          v-for="(item, index) in classification"
          class="partItem"
        >
          <view
            @click="changePart(index + 1)"
          >
            <view
              :class="
                chosePart == index + 1 ? 'grid_part grid_active' : 'grid_part'
              "
              >{{ item.name }}</view
            >
          </view>
        </view>
        <!-- 				<view class="partItem" style="height:60px;">
					<view class="grid-item-box" style="margin: 0;" @click="changePart(2)">
						<view :class="chosePart == 2 ? 'grid_part grid_active' : 'grid_part'">中级专区</view>
						<view class="grid_chose" v-show="chosePart == 2"></view>
					</view>
				</view>
				<view class="partItem" style="height:60px;">
					<view class="grid-item-box" style="margin: 0;" @click="changePart(3)">
						<view :class="chosePart == 3 ? 'grid_part grid_active' : 'grid_part'">高级专区</view>
						<view class="grid_chose" v-show="chosePart == 3"></view>
					</view>
				</view> -->
      </view>

      <view
        class="tab-bar"
        v-for="(item, index) in tabList"
        v-show="chosePart == 1"
      >
        <view class="info_bg"></view>
        <view
          class="tab_item"
          @click="navToUrl('/pages/invest/detail?id=' + item.id)"
        >
          <view class="tab_con1"><image :src="weburl + item.img"></image></view>
          <view class="tab_con2">
            <p class="text tab_title">{{ item.title }}</p>
            <p class="text">金额：{{ item.min }}元</p>
            <p class="text">抽奖：{{ item.point }}次</p>
            <p class="text" v-if="item.is_jifen">积分：{{ item.givejifen }}</p>
          </view>
          <view class="tab_con3">
            <p class="text tab_prod">周期：{{ item.day }}天</p>
            <p class="text">收益：￥{{ (item.min * item.rate) / 100 }}/天</p>
            <p class="text">红包：{{ item.red }}</p>
          </view>
        </view>
      </view>
      <view
        class="tab-bar"
        v-for="(item, index) in tabList"
        v-show="chosePart == 2"
      >
        <view class="info_bg"></view>
        <view
          class="tab_item"
          @click="navToUrl('/pages/invest/detail?id=' + item.id)"
        >
          <view class="tab_con1"><image :src="weburl + item.img"></image></view>
          <view class="tab_con2">
            <p class="text tab_title">{{ item.title }}</p>
            <p class="text">金额：{{ item.min }}元</p>
            <p class="text">抽奖：{{ item.point }}次</p>
            <p class="text">积分：{{ item.givejifen }}</p>
          </view>
          <view class="tab_con3">
            <p class="text tab_prod">周期：{{ item.day }}天</p>
            <p class="text">收益：￥{{ (item.min * item.rate) / 100 }}/天</p>
            <p class="text">红包：{{ item.red }}</p>
          </view>
        </view>
      </view>
      <view
        class="tab-bar"
        v-for="(item, index) in tabList"
        v-show="chosePart == 3"
      >
        <view class="info_bg"></view>
        <view
          class="tab_item"
          @click="navToUrl('/pages/invest/detail?id=' + item.id)"
        >
          <view class="tab_con1"><image :src="weburl + item.img"></image></view>
          <view class="tab_con2">
            <p class="text tab_title">{{ item.title }}</p>
            <p class="text">金额：{{ item.min }}元</p>
            <p class="text">抽奖：{{ item.point }}次</p>
            <p class="text">积分：{{ item.givejifen }}</p>
          </view>
          <view class="tab_con3">
            <p class="text tab_prod">周期：{{ item.day }}天</p>
            <p class="text">收益：￥{{ (item.min * item.rate) / 100 }}/天</p>
            <p class="text">红包：{{ item.red }}</p>
          </view>
        </view>
      </view>
      <view
        class="tab-bar"
        v-for="(item, index) in tabList"
        v-show="chosePart == 4"
      >
        <view class="info_bg"></view>
        <view
          class="tab_item"
          @click="navToUrl('/pages/invest/detail?id=' + item.id)"
        >
          <view class="tab_con1"><image :src="weburl + item.img"></image></view>
          <view class="tab_con2">
            <p class="text tab_title">{{ item.title }}</p>
            <p class="text">金额：{{ item.min }}元</p>
            <p class="text">抽奖：{{ item.point }}次</p>
            <p class="text">积分：{{ item.givejifen }}</p>
          </view>
          <view class="tab_con3">
            <p class="text tab_prod">周期：{{ item.day }}天</p>
            <p class="text">收益：￥{{ (item.min * item.rate) / 100 }}/天</p>
            <p class="text">红包：{{ item.red }}</p>
          </view>
        </view>
      </view>
      <view
        class="tab-bar"
        v-for="(item, index) in tabList"
        v-show="chosePart == 5"
      >
        <view class="info_bg"></view>
        <view
          class="tab_item"
          @click="navToUrl('/pages/invest/detail?id=' + item.id)"
        >
          <view class="tab_con1"><image :src="weburl + item.img"></image></view>
          <view class="tab_con2">
            <p class="text tab_title">{{ item.title }}</p>
            <p class="text">金额：{{ item.min }}元</p>
            <p class="text">抽奖：{{ item.point }}次</p>
            <p class="text">积分：{{ item.givejifen }}</p>
          </view>
          <view class="tab_con3">
            <p class="text tab_prod">周期：{{ item.day }}天</p>
            <p class="text">收益：￥{{ (item.min * item.rate) / 100 }}/天</p>
            <p class="text">红包：{{ item.red }}</p>
          </view>
        </view>
      </view>
    </view>

    <!-- 		<view class="main_plate">
			<view class="wallet_top">
				<view class="my_wal_l"></view>
				<view class="my_wal_tit">行业资讯</view> 
			</view>
			
			<view class="tab-bar" v-for="(item, index) in activeList" style="height: 32vw;" @click="navToUrl('/pages/news/detail?news_id='+item.id)">
				<view class="info_bg"></view>
				<view class="at_item">
					<view class="item_image"><image :src="weburl+item.photo"></image></view>
					<view class="item_r">
						<view class="item_tit">{{item.title}}</view>
						<view class="item_contain">{{item.keyword}}</view>
						<view class="item_date">{{item.date}}</view>
					</view>
				</view>
			</view>
		</view> -->
    <uni-popup ref="gg" :show="isShowGonggao" type="center">
      <view class="popup_mask"></view>
      <view class="popup_content" :style="{ bottom: popupBottom }">
        <view class="title">
          {{ gonggao_title }}
        </view>
        <view class="explain_text">
          <rich-text
            :nodes="gonggao ? getHtml(gonggao) : ' '"
            space="true"
            selectable="true"
          />
        </view>
        <view class="button">
          <button
            @click="$refs.gg.close()"
            class="text-white"
            style="background-color: #0f51a0; display: inline-block"
          >
            关闭
          </button>
          <button
            @click="navToUrl('/pages/help/detail?id=1')"
            class="text-white"
            style="
              background-color: #0f51a0;
              display: inline-block;
              margin-left: 30rpx;
            "
          >
            阅读公告
          </button>
        </view>
      </view>
    </uni-popup>

    <tabBar :currentPage="currentPage"></tabBar>
  </view>
</template>

<script>
import htmlParser from "../../common/html-parser";
import tabBar from "@/components/tabBar/tabBar.vue";
import gbroMarquee from "@/components/GBroMarquee/marquee.vue";
import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import uniList from "@/components/uni-list/uni-list.vue";
import uniListItem from "@/components/uni-list-item/uni-list-item.vue";
export default {
  components: {
    tabBar,
    gbroMarquee,
    uniIcons,
  },
  data() {
    return {
      index_top: "",
      info: {},
      currentPage: "/pages/index/index",
      loading: !1,
      loaded: !1,
      broadcastData: "",
      broadcastStyle: {
        speed: 2, //每秒3个字
        font_size: "28", //字体大小(upx)
        text_color: "#000000", //字体颜色
        back_color: "#f3f4f8", //背景色
      },
      swiperCurrent: 0,
      swiperLength: 0,
      carouselList: [],
      projectItems: [],
      classification: [],
      showLoadMore: true,
      isLoading: !1,
      modalName: null,
      launchFlag: !1,
      showBottomDiv: 0,
      policyStorageKey: "has_read_privacy",
      showPopup: 1,
      cateid: 0,
      class: 0,
      classify: [],
      page: 1,
      lastPage: 0,
      loadMoreText: "加载中...",
      items: [],
      isAvatar: -1,
      gonggao: "",
      gonggao_title: "",
      isShowGonggao: false,
      title: "全部项目",
      prodList: [],
      news: [],
      chosePart: 1,
      tabList: [],
      class: [],
      activeList: [],
    };
  },
  onLoad: function (option) {
    this.loadBanners();
    this.loadNotice();
    this.loadInvest(1);
    this.info = uni.getStorageSync("userinfo");
    this.getNews();
    this.isAvatar = -1;
    this.title = "全部项目";
    this.cateid = option.cateid;
  },

  onShow() {
    uni.hideTabBar({});
    this.info = uni.getStorageSync("userinfo");
    this.loadImg();
  },
  onUnload() {
    (this.page = 1),
      (this.lastPage = 0),
      (this.list = []),
      (this.loadMoreText = "加载中..."),
      (this.showLoadMore = true);
  },
  onReachBottom() {
    // console.log("onReachBottom");
    if (this.page >= this.lastPage) {
      this.loadMoreText = "没有更多数据了!";
      return;
    } else {
      setTimeout(() => {
        this.getData();
        this.getTasksList();
      }, 300);
    }
  },
  created: function () {
    var that = this;
    uni.getStorage({
      key: this.policyStorageKey,
      success: (res) => {
        if (res.data) {
          that.showPopup = false;
        }
      },
      fail: function (e) {
        that.showPopup = true;
      },
    });
  },
  computed: {
    popupBottom() {
      let ggLength = this.gonggao ? this.gonggao.length : 0;
      //console.log('a',ggLength);
      if (ggLength > 600) {
        return "10%";
      } else if (ggLength <= 600 && ggLength > 400) {
        return "20%";
      } else {
        return "30%";
      }
    },
  },
  methods: {
    hideModal: function () {
      this.modalName = null;
    },
    changePart: function (type) {
      console.log("type:", type);
      this.chosePart = type;
      this.tabList = [];
      this.loadInvest(type);
    },
    loadInvest: function (type) {
      this.cateid = type;
      let page = this.page;
      let info = uni.getStorageSync("userinfo");
      let timestamp = this.helper.now();
      let sign = this.helper.setSign([
        "class=" + this.cateid,
        "page=" + page,
        "token=" + info.token,
        "timestamp=" + timestamp,
      ]);
      this.helper
        .req({
          api: "getInvestList",
          timestamp: timestamp,
          data: { class: this.cateid, page: page, token: info.token },
          header: {
            sign: sign,
          },
          method: "GET",
        })
        .then((res) => {
          this.tabList = res.data.data.list.data;
          this.classification = res.data.data.class;
          console.log("class", this.classification);
          uni.hideLoading();
        });
    },
    loadBanners: function () {
      let timestamp = this.helper.now();
      let sign = this.helper.setSign(["type=home", "timestamp=" + timestamp]);
      this.helper
        .req({
          api: "getBanners",
          timestamp: timestamp,
          data: {
            type: "home",
          },
          header: {
            sign: sign,
          },
          method: "GET",
        })
        .then((res) => {
          // console.log(res);
          this.carouselList = res.data.data.list;
          this.swiperLength = this.carouselList.length;

          uni.hideLoading();
        });
    },
    loadNotice: function () {
      let timestamp = this.helper.now();
      let sign = this.helper.setSign(["timestamp=" + timestamp]);
      this.helper
        .req({
          api: "getNotice",
          timestamp: timestamp,
          header: {
            sign: sign,
          },
          method: "GET",
        })
        .then((res) => {
          this.broadcastData = [res.data.data.notice, res.data.data.notice];
          let gonggaoArr = res.data.data.gonggao;
          if (gonggaoArr.show == 1) {
            this.gonggao = gonggaoArr.content;
            this.gonggao_title = gonggaoArr.title;
            this.isShowGonggao = true;
            this.$refs.gg.open();
          }
        });
    },

    //资讯
    getNews: function () {
      let timestamp = this.helper.now();
      let sign = this.helper.setSign(["timestamp=" + timestamp]);
      this.helper
        .req({
          api: "getNewsList",
          timestamp: timestamp,
          header: {
            sign: sign,
          },
          method: "GET",
        })
        .then((res) => {
          this.activeList = res.data.data.lista;
          //console.log(this.activeList)
        });
    },

    //轮播图点击事件
    navToAdvUrls: function (e) {
      return uni.navigateTo({
        url: e.url,
      });
    },
    //隐私策略
    navToUrl: function (url) {
      return uni.navigateTo({
        url: url,
      });
    },
    switchToUrl: function (url) {
      return uni.switchTab({
        url: url,
      });
    },
    onImageLoad: function (e, t) {
      this.$set(this[e][t], "loaded", "loaded");
    },
    onImageError: function (e, t) {
      this[e][t].icon = "/static/errorImage.jpg";
    },
    closeDiv: function () {
      this.showBottomDiv = false;
    },
    back: function () {
      this.$emit("popupState", false);
      // #ifdef APP-PLUS
      plus.runtime.quit();
      // #endif
    },
    // 关闭弹框
    confirm: function () {
      this.showPopup = false;
      this.$emit("popupState", true);

      uni.setStorage({
        key: this.policyStorageKey,
        data: true,
      });
    },
    goto() {
      uni.switchTab({
        url: "/pages/user/person",
      });
    },
    // 获取顶部img
    loadImg: function () {
      var range = Math.round(Math.random() * (99999 - 11111)) + 11111;
      this.index_top = this.weburl + "/storage/upload/index_top.png?k=" + range;
      this.avatar = this.weburl + "/storage/upload/icon_avatar.png?k=" + range;
    },
    getHtml(content) {
      return htmlParser(content);
    },

    imageError: function (e) {
      this.avatar = "/static/icon_avatar.png";
    },
    onBtn: async function (title, index) {
      this.title = title;
      this.isAvatar = index;
      if (this.isAvatar == -1) {
        await this.getTasksList();
      } else {
        await this.getTasksList();
        // await this.$nextTick(() => {
        let arr = [];
        this.projectItems.map((item) => {
          if (item.classname == this.title) {
            arr.push(item);
          }
        });

        this.projectItems = arr;
        // console.log(arr)
        // })
      }
    },
    navToDetails: function (e) {
      return uni.navigateTo({
        url: "/pages/invest/details?code=" + e.id,
      });
    },
  },
};
</script>

<style lang="scss">
$width: 100%;

.container {
  // background-image: url('@/static/images/person/center-bg.png');
  // background-size: 100% 100%;
  // background-repeat: no-repeat;
  // height: 570vw;
  //background-color: #0d1a44;
	background: linear-gradient(180deg,#27bdee 0%, #3e98f9 100rpx,#dde9fd  800rpx);
	min-height: 100vh;
  //height:100%;
}
.uni-loadmore {
  margin-bottom: 60px;
}
.labelImg {
  width: 100vw;

  .baoKu {
    width: 100%;
    margin: 20px;
    background-color: #fff;

    .image {
      width: 100%;
      height: 129px;
    }
  }
}

.main_plate {
  width: 100vw;
  padding: 0 2vw 10vh;

  .wallet_top {
    height: 50px;
    line-height: 36px;
    //padding-bottom: 5vh;
    // border-bottom: 1px solid #DDD;
    position: relative;
    display: inline-flex;
  }
  .wallet_top {
	  display: flex;
	  align-items: center;
    .my_wal_l {
      width: 4px;
      height: 18px;
      background: #ffffff;
      border-radius: 4px;
      float: left;
      margin: 16px 4px 20px;
    }
    .my_wal_tit {
      font-size: 18px;
      font-weight: 600;
      padding: 8px;
      float: left;
      color: #000;
    }
	  .my_wal_tit-info {
		  display: flex;
			align-items: center;
		  width: 120rpx;
		  height: 50rpx;
		  background: url("@/static/images/ui-1/3.png");
	    background-size: 100% 100%;
		  color: #fff;
	  }
  }
}

.tab-bar {
  width: 96vw;
  height: 200rpx;
  margin: 4vw 0;
  position: relative;

  .info_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #fff;
    border-radius: 10px;
  }

  .item_image {
    width: 32vw;
    height: 32vw;
    padding: 4vw;
    float: left;
    image {
      width: 24vw;
      height: 24vw;
    }
  }
  .item_r {
    float: right;
    width: 64vw;
    height: 30vw;
    padding: 2vw 2vw 2vw 0;
    color: #fff;
    .item_tit {
      line-height: 36px;
      font-size: 15px;
      font-weight: bold;
      width: 58vw;
      height: 36px;
      overflow: hidden;
    }
    .item_contain {
      line-height: 20px;
      font-size: 13px;
      width: 62vw;
      height: 60px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3; /* 定义文本的最大行数 */
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .item_date {
      line-height: 24px;
      font-size: 14px;
      width: 58vw;
      text-align: right;
    }
  }
}

.is-hover {
  color: #ffffff;
  border-radius: 0.32rem;
  background-color: #f97c27;
  border-color: #f97c27;
}

.tabBar_top {
  height: 80upx;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  background-color: rgba(232, 228, 229, 0);
  color: #000;
  border-bottom-left-radius: 10upx;
  border-bottom-right-radius: 10upx;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tab_tit {
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}

.logo {
  width: 39%;
  height: 80upx;

  display: flex;
  align-items: center;
}

.logo .logoImg {
  width: 80%;
  height: 33px;
  background-size: cover;
}

.info {
  height: 100upx;
  box-sizing: border-box;
  padding: 4px 12px;
  // padding-right: 24px;
  font-size: 16px;

  display: flex;
  align-items: center;
}

.info span {
  padding-right: 12px;
}

.info .infoImg {
  width: 71upx;
  height: 71upx;
  border-radius: 50%;
}

.container {
  // margin-top: 139upx;
}

.tab_item {
  width: 96vw;
	height: 200rpx;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;

  .tab_con1 {
	  display: flex;
	  justify-content: center;
	  align-items: center;
    width: 28%;
    image {
      width: 70px;
      height: 70px;
      border-radius: 35px;
    }
  }
  .tab_con2 {
    width: 50%;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
    color: #353535;
    font-size: 12px;
    .tab_title {
      font-size: 15px;
	    color: #4f8efd;
	    font-weight: bold;
	    margin-bottom: 10rpx;
    }
  }
  .tab_con3 {
	  display: flex;
	  flex-direction: column;
    width: 32%;
    color: #353535;
    font-size: 12px;
    .tab_prod {
	    font-size: 15px;
	    color: #4f8efd;
	    font-weight: bold;
	    margin-bottom: 30rpx;
	    margin-top: 30rpx;
    }
  }
}

.at_item {
  height: 36vw;
}

.index_banner {
  width: 96vw;
  margin: 8px 2vw;
  border-radius: 8px;
  // margin-bottom: 20upx;
  // margin-top: -140upx;
}

.marginBottom {
  margin-top: 129upx;
  padding-bottom: 109upx;
}

.index_banner image {
  border-radius: 10upx;
}

.cu-item image {
  width: 92%;
  margin: 1% auto;
}

.screen-swiper {
  min-height: 380upx;
  box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
  background: #f9f9fc;
}

.index_marquee {
  margin-top: 16px;
}

.index_fuli {
  margin-top: 20upx;
}
.fuliImg {
  width: 96%;
  height: 65px;
  margin-left: 2%;
}

.index_tarbar {
  width: 96%;
  margin: 12px 2%;
  position: relative;
	display: flex;
	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 10rpx;
		.title-text {
			font-size: 20px;
			font-weight: bold;
			color: #21274b;
		}
		.btn {
			width: 40rpx;
			height: 40rpx;
			background: #8bb4ff;
			border-radius: 50%;
			font-size: 20px;
			text-align: center;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.info-text {
		font-size: 24rpx;
		color: #7f7f7f;
		margin-top: 10rpx;
	}
	.btn2 {
		margin-top: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50rpx;
		width: 140rpx;
		background: #8bb4ff;
		border-radius: 30rpx;
		font-size: 24rpx;
		text-align: center;
		color: #fff;
		border: 3rpx solid #cce1ff;
	}
	.tarbar_tx02 {
		.title {
			.title-text {
				color: #ae6c1e;
			}
			.btn {
				background: #ae6c1e;
			}
		}
		.info-text {
			color: #ae6c1e;
		}
		.btn2 {
			background: #faddb2;
			border-color: #ae6c1e;
			margin-top: 20rpx;
			color: #ae6c1e;
		}
	}
	.tarbar_tx03 {
		.title {
			.title-text {
				color: #ff0101;
			}
			.btn {
				background: #ff0101;
			}
		}
		.info-text {
			color: #ff0101;
		}
		.btn2 {
			background: #ffd8ca;
			border-color: #ff0101;
			color: #ff0101;
			margin-top: 20rpx;
		}
	}
  .tarbar_img_01 {
    width: 50%;
    height: 480rpx;
    position: relative;
    top: 0;
    left: 0;
  }
  .tarbar_img_02 {
    position: relative;
    top: 5rpx;
    right: 0;
  }
	.tarbar_img_03 {
		position: relative;
		top: 250rpx;
		right: 0;
	}
  .tarbar_tx01 {
    position: absolute;
	  top: 38rpx;
    left: 20px;

    z-index: 2;
  }
  .tarbar_tx02 {
    position: absolute;
    top: 36rpx;
    left: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #21274b;
    z-index: 2;
  }
	.tarbar_tx03 {
		position: absolute;
		top: 36rpx;
		left: 20px;
		font-size: 20px;
		font-weight: bold;
		color: #21274b;
		z-index: 2;
	}
  image {
    width: 100%;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
}

.partList {
	display: flex;
	gap: 20rpx;
	padding-left: 20rpx;
  .partItem {
  }
}

.grid_part {
	width: 140rpx;
	line-height: 50rpx;
	background: url("@/static/images/ui-1/1.png");
	background-size: 100% 100%;
  color: #454545;
  font-size: 25rpx;
}
.grid_active {
  color: #fff;
	background: url("@/static/images/ui-1/2.png");
	background-size: 100% 100%;
	
}
.grid_chose {
  width: 60px;
  height: 6px;
  background: #7ae6ff;
  border-radius: 4px;
  margin: 0 15px;
}
.popup_mask {
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.4);
  transition-property: opacity;
  transition-duration: 0.3s;
  opacity: 0;
  z-index: 98;
}

.popup_mask {
  opacity: 1;
}

.popup_content {
  overflow: hidden;
  box-sizing: border-box;
  padding: 40upx 20upx 0 20upx;
  position: fixed;
  bottom: 10%;
  border-radius: 8px;
  left: 50%;
  margin-left: -40%;
  right: 0;
  min-height: 400upx;
  background: #fdfdfdde;
  color: #141313;
  width: 80%;
  z-index: 99;
  font-family: "Microsoft YaHei", Arial, sans-serif;
  font-weight: bold;

  .title {
    text-align: center;
    font-size: 36upx;
    padding: 10upx 0 0 0;
  }

  .explain_text {
    font-size: 25upx;
    padding: 30upx 30upx 40upx 0upx;
    //line-height: 50upx;
    overflow-wrap: break-word; /* 兼容性较好的属性，用于控制文本换行 */
    word-wrap: break-word; /* 旧版本浏览器兼容 */

    .line {
      display: block;

      .path {
        color: #007aff;
        display: inline-block;
        text-align: center;
      }
    }
  }

  .button {
    display: flex;
    padding: 30upx 20upx;
    align-items: center;
    font-size: 34upx;
    justify-content: space-around;
    border-top: 2upx solid #f2f2f2;

    view {
      text-align: center;
    }
  }
}
.idx_bar {
  width: 92vw;
  height: 26vw;
  margin: 4vw;
  image {
    width: 100%;
    height: 100%;
  }
}
</style>
